<template>
	<view class="m-capsule x-f">
		<uni-icons fontFamily="CustomFontPlatform" color="#fff" :size="18">
			{{ toUniCode('&#xe675;') }}
		</uni-icons>
		<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
		<uni-icons fontFamily="CustomFontPlatform" color="#fff" @click="handleClose" :size="18">
			{{ toUniCode('&#xe64a;') }}
		</uni-icons>
	</view>
</template>

<script setup lang="ts" name="m-capsule">
	import { getCurrentInstance } from 'vue';
	import { toUniCode } from '../../static/assets/ts/utils';

	// 定义组件参数类型
	interface Props {
		// 关闭按钮事件方法
		closeHandler ?: () => void;
		// 返回页面数量
		closeCurrent ?: number | string;
	}

	// 声明组件参数
	const props = withDefaults(defineProps<Props>(), {
		closeCurrent: () => 999
	});

	console.log(1111);
	// 关闭按钮点击事件处理
	const handleClose = () => {
		if (props.closeHandler) {
			props.closeHandler();
		} else {
			uni.navigateBack({
				delta: Number(props.closeCurrent)
			});
		}
	};
</script>

<style lang="scss">
	.m-capsule {
		border: 1px solid #fff;
		color: #fff;
		padding: 6px 12px;
		overflow: hidden;
		border-radius: 9999px;
	}
</style>